<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <div id="baiduMap" style="width: 100%;height:900px"></div>
<!--引入百度地图-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=zLpINMdICZ7LkhWnvGe2Ql4mjIEIqGzG"></script>
<script>
     baiduMapFn('北京市天安门')
 //百度地图
function baiduMapFn(addressName) {
  var map = new BMapGL.Map("baiduMap");
  // var point = new BMapGL.Point(116.404, 39.915);//坐标
  // map.centerAndZoom(point, 15);
  // map.centerAndZoom('北京', 10);//名称
  //判断是否定位当前地址
  if(addressName){
    map.centerAndZoom(addressName, 15);
    //创建地址解析实例
    var myGeo = new BMapGL.Geocoder();
    myGeo.getPoint(addressName, function (point) {
      if (point) {
        // var ggPoint = new BMapGL.Point(point.lng, point.lat);
        // var markergg = new BMapGL.Marker(ggPoint);
        // map.addOverlay(markergg); //添加GPS marker
        map.addOverlay(new BMapGL.Marker(point, {title: addressName}))
      } else {
        alert('您选择的地址没有解析到结果！');
      }
    },'北京')
  } else {
    map.centerAndZoom('北京', 10);
  }
  map.enableScrollWheelZoom(true);
  var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
  map.addControl(zoomCtrl);
  // var cityCtrl = new BMapGL.CityListControl({
  //   // 控件的停靠位置（可选，默认左上角）
  //   // anchor: BMAP_ANCHOR_TOP_LEFT,
  //   // // 控件基于停靠位置的偏移量（可选）
  //   // offset: new BMapGL.Size(10, 5)
  // });  // 添加城市列表控件
  // map.addControl(cityCtrl);
}   
</script>
</body>
</html>